<template>
    <div class="categoryContainer">
        <el-button type="primary" @click="addHandler" style="margin-bottom: 1rem">添加分类</el-button>
        <el-table :data="categoryList" v-loading="isLoading">
            <el-table-column prop="categoryID" label="分类ID"></el-table-column>
            <el-table-column prop="category" label="分类"></el-table-column>
            <el-table-column label="操作">
                <template #default="scope">
                    <el-button type="primary" @click="updateHandler(scope.row)">修改</el-button>
                    <el-button type="danger" @click="deleteHandler(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script>
import { userStore } from "@/store/user";
import service from "@/utils/request";
import { ElMessageBox, ElMessage } from "element-plus";

export default {
    name: "CategoryManage",
    data() {
        return {
            categoryList: [],
            isLoading: true,
        };
    },
    methods: {
        addHandler() {
            ElMessageBox.prompt("请输入新的分类名称", "新增分类", {
                confirmButtonText: "确认",
                cancelButtonText: "取消",
                inputErrorMessage: "请输入新的分类名称",
            })
                .then(({ value }) => {
                    service({
                        method: "post",
                        url: `/category/add`,
                        headers: {
                            token: userStore().token,
                            "Content-type": "application/json",
                        },
                        data: {
                            category: value,
                        },
                    })
                        .then(() => {
                            ElMessage({
                                type: "success",
                                message: "新增分类信息成功",
                            });
                            this.refresh();
                        })
                        .catch(() => {});
                })
                .catch(() => {});
        },
        updateHandler(row) {
            ElMessageBox.prompt("请输入新的分类名称", `修改 “${row.category}”`, {
                confirmButtonText: "确认",
                cancelButtonText: "取消",
                inputErrorMessage: "请输入新的分类名称",
            })
                .then(({ value }) => {
                    service({
                        method: "patch",
                        url: `/category/update`,
                        headers: {
                            token: userStore().token,
                            "Content-type": "application/json",
                        },
                        data: {
                            categoryID: row.categoryID,
                            category: value,
                        },
                    })
                        .then(() => {
                            ElMessage({
                                type: "success",
                                message: "修改分类信息成功",
                            });
                            this.refresh();
                        })
                        .catch(() => {});
                })
                .catch(() => {});
        },
        deleteHandler(row) {
            service({
                method: "get",
                url: `/book/selectByCategoryId/${row.categoryID}`,
                headers: {
                    token: userStore().token,
                },
            }).then((res) => {
                if (res.data.data.length === 0) {
                    ElMessageBox.confirm("确定要删除该分类吗？", "警告", {
                        type: "warning",
                        confirmButtonText: "确认",
                        cancelButtonText: "取消",
                    }).then(() => {
                        service({
                            method: "delete",
                            url: `/category/deleteById/${row.categoryID}`,
                        }).then(() => {
                            ElMessage({
                                type: "success",
                                message: "删除成功",
                            });
                            this.refresh();
                        });
                    });
                } else {
                    ElMessage({
                        type: "error",
                        message: "该分类下有图书，不能删除",
                    });
                }
            });
        },
        async refresh() {
            this.isLoading = true;
            await service.get("/category/list").then((res) => {
                this.categoryList = res.data.data;
            });
            this.isLoading = false;
        },
    },
    beforeMount() {
        this.refresh();
    },
};
</script>

<style scoped>
.categoryContainer {
}
</style>
